<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <link rel="shortcut icon" type="image/x-icon" href="/Images/favicon.ico" media="screen">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=f5a12a1d">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <title>麦克斯</title>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑", 'Microsoft YaHei';
        }
        body {
            background: #fff;
        }
        html {
            font-size: 62.5%;
        }
        .content {
            width: 100%;
            position: relative;
            top: 0;
            padding-bottom: 100px;
        }
        .table-detail{
            width: 100%;
            border-spacing: 0;
            border-collapse: collapse;
            display: table;
        }
        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
            border: 1px solid #cbcbcd;
        }
        table th {
            background: #f8f8f8;
            padding: 5px;
        }
        table td {
            text-align: center;
            padding: 5px;
        }
        .table-bordered {
            border: 1px solid #cbcbcd;
        }
        table td select{
            width:100%;
            border:none;
            outline: none;
        }
        table td input{
            width:100%;
            border:none;
            outline: none;
            text-align: center;
        }
        .span-a-btn {
            color: #2a8cec;
        }
        .span-a-btn a{
            text-decoration: none;
            font-size: 20px;
        }
        .btn{
            width:50px;
            height:30px;
            background: #2a8cec;
            color: #FFffff;
            text-align: center;
            border:none;
            outline:none;
            position: relative;
            left:50%;
            margin-top: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<section class="content" id="app">
    <div style="text-align: center">
        <span style="font-size: 18px">表单名称:&nbsp&nbsp&nbsp</span>
        <input type="text"  v-model="formsCreate.formsName">
    </div>
    <div style="position: relative;top: 10px">
    <table class="table-detail table table-bordered text-center" >
        <tr>
            <th width="10%">序号</th>
            <th width="20%">字段描述</th>
            <th width="20%">字段类型</th>
            <th>提示信息</th>
            <th width="10%">
                操作 <span class="span-a-btn">
                    <a href="javascript:void(0);" class="a-btn" @click="add">+</a>
                </span>
            </th>
        </tr>
        <tr v-for="(item,i) in forms">
            <td>{{i+1}}</td>
            <td>
                <input type="text" v-model="item.description">
            </td>
            <td class="td-value1">
                <select v-model="item.compId">
                    <option  selected value="1">文本框</option>
                    <option v-for="(itemz,i) in zdTypeList" v-bind:value="itemz.id">{{itemz.name}}</option>
                </select>
            </td>
            <td>
                <input type="text" placeholder="请输入" v-model="item.prompt">
            </td>
            <td>
                <span class="span-a-btn">
                    <a href="javascript:void(0);" class="a-btn" @click="add">+</a>
                </span>
                <span class="span-a-btn">
                    <a href="javascript:void(0);" class="a-btn" @click="del(item.id,i)">-</a>
                </span>
            </td>
        </tr>
    </table>
    <button class="btn" @click="save">保存</button>
    </div>
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  -->
<script src="/dist/js/oa.js?t=63aed32f"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript">
    function refresh() {
       location.reload();
    }
    var app = new Vue({
        el:"#app",
        data:{
            userId:getCurrentUser().id,

            zdTypeList:[
                {name: 'text', value: 'text'},
            ],
            addDetail:{},
            forms:[
                {description:'',compId:'1',prompt:'',mainId:''}
            ],

            formsCreate:{
                id:'',
                createUserId:getCurrentUser().id,
                formsName:''
            },
        },
        methods:{
            add:function(){
                var that=this;
                that.forms.push({
                    description:that.addDetail.description,
                    compId:'1',
                    prompt:that.addDetail.prompt,
                })
            },
            del: function (id,i) {
                this.forms.splice(i,1)
            },
            save:function () {
                var that=this;
                if (that.formsCreate.formsName == "") {
                    alert("表单名称不能为空");
                    return false;
                }

                var d=that.formsCreate;
                $.wyui.postMethod('/forms/saveCreaterInfo.json',trimRN(d), function (r) {
                   var records=r.records;
                    if(records !='已存在'){

                        if(records=="保存失败"){
                            alert("保存失败");
                        }else {
                            that.formsCreate.id=records;
                            /*将create表的ID赋值给fields的mainId*/
                            for(var i=0;i<that.forms.length;i++){
                               that.forms[i].mainId=that.formsCreate.id;
                            }
                            /*保存forms信息*/
                            var data=that.forms;
                            $.wyui.postMethod( '/forms/saveInfo.json', trimRN(data), function (r) {
                                var records = r.records;
                                if (records == '保存成功') {
                                    alert("保存成功");
                                    parent.refresh();
                                } else{
                                    alert("保存失败");
                                }
                            });

                        }
                    }else{
                       alert("表单名称已存在，请重新输入！");
                    }

                })


            },

        },
        mounted:function () {
            var that=this;
            $.wyui.postMethod('/forms/getComponents.json',{}, function (r) {
                that.zdTypeList = r;
            })

          /*  $.wyui.postMethod('/forms/saveCreaterInfo.json',{'createUserId':that.userId}, function (r) {
                that.createId = r;
            })*/

        }
    })
</script>
</body>
</html>